<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="https://unpkg.com/centrifuge@^5/dist/centrifuge.js"></script>
        <script type="text/javascript">
            window.addEventListener('load', function() {
                const container = document.getElementById('messages');

                function drawText(text) {
                    let e = document.createElement('li');
                    e.innerHTML = [(new Date()).toString(), ' ' + text].join(':');
                    container.insertBefore(e, container.firstChild);
                }

                const centrifuge = new Centrifuge('ws://' + window.location.host + '/connection/websocket');

                centrifuge.on('connecting', function(ctx){
                    drawText('Connecting: ' + ctx.reason);
                });

                centrifuge.on('disconnected', function(ctx){
                    drawText('Disconnected: ' + ctx.reason);
                });

                // bind listeners on centrifuge object instance events.
                centrifuge.on('connected', function(ctx){
                    drawText('Connected with client ID ' + ctx.client + ' over ' + ctx.transport);
                });

                // Subscribe to different channels on different example ports.
                centrifuge.newSubscription(window.location.host).subscribe();

                centrifuge.connect();
            });
        </script>
    </head>
    <body>
        <ul id="messages"></ul>
    </body>
</html>
